<template>
  <div class='search'>
    <f-drawer ref='consumptionDrawer' :title='drawerTitle' width='60%' @submit='handleSubmit' @visibleChange='visibleChange'>
      <consumption-form ref='form1' v-if="drawerVisible&&current=='form1'"></consumption-form>
      <consumption-details ref="form2" v-if="drawerVisible&&current=='form2'"></consumption-details>
    </f-drawer>
  </div>
</template>
<script>
import consumptionForm from './consumption_form.vue'
import ConsumptionDetails from '@/views/module/business/consumption/consumption_details'

export default {
  name: 'consumptionDrawer',
  props: {},
  data() {
    return {
      refs: this.$refs,
      drawerVisible: false,
      isEdit: false,
      title: '',
      current: 'form1',
      formData: {},
      forms: [
        'form1'
      ]
    }
  },
  methods: {
    showDrawer(data,formName) {
      this.isEdit = false
      if (data && data.consumptionId) {
        this.isEdit = true
        this.formData = data
      } else {
        this.formData = {}
      }
      this.refs['consumptionDrawer'].show()
      this.tabClick(formName)
    },
    handleSubmit(callback) {
      this.refs[this.current].handleSubmit(callback)
    },
    visibleChange(drawerVisible) {
      this.drawerVisible = drawerVisible
    },
    tabClick(name) {
      this.current = name
      if (this.current === 'form1') {
        this.title = this.isEdit ? '编辑日常开销费用' : '添加日常开销费用'
      }
      this.$nextTick(() => {
        this.refs[this.current].setData(this.formData)
      })
    }
  },
  computed: {
    drawerTitle: function() {
      return this.title
    }
  },
  created() {
  },
  components: { ConsumptionDetails, consumptionForm }
}
</script>

<style scoped lang='less' rel='stylesheet/less'>

</style>
